<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-repeat: no-repeat;
            background-image: url("images/bg.jpg");
            background-size: 2000px;
        }
        table{
            text-align: center;
        }
    </style>

</head>
<body>
<!--<fieldset class="table-search-fieldset">-->
<!--    <legend>搜索信息</legend>-->
<!--    <div style="margin: 10px 10px 10px 10px">-->
<!--        <form class="layui-form layui-form-pane" action="">-->
<!--            <div class="layui-form-item">-->
<!--                <div class="layui-inline">-->
<!--                    <label class="layui-form-label">日期：</label>-->
<!--                    <div class="layui-inline layui-input-inline">-->
<!--                        <input type="text" name="date" class="layui-input" id="test1">-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="layui-inline">-->
<!--                    <label class="layui-form-label">学号：</label>-->
<!--                    <div class="layui-inline layui-input-inline">-->
<!--                        <input  type="text" name="id" autocomplete="off" class="layui-input" id="demoReload">-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="layui-inline">-->
<!--                    <label class="layui-form-label">学生姓名：</label>-->
<!--                    <div class="layui-input-inline">-->
<!--                        <input type="text" name="username" autocomplete="off" class="layui-input">-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="layui-inline">-->
<!--                    <label class="layui-form-label">班级：</label>-->
<!--                    <div class="layui-input-inline">-->
<!--                        <input type="text" name="classes" autocomplete="off" class="layui-input">-->
<!--                    </div>-->
<!--                </div>-->
<!--                <button class="layui-btn" id="searchBtn">搜 索</button>-->
<!--            </div>-->
<!--        </form>-->
<!--    </div>-->
<!--</fieldset>-->

<table id="demo" lay-filter="test"></table>

<script src="../../lib/layui-v2.6.3/layui.js"></script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
<!--        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">学生信息</button>-->
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">选中的学生数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">是否全选</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn  layui-btn-xs " lay-event="edit">修改家长电话</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger " lay-event="del">删除</a>
</script>
<script>
    // 时间选框
    layui.use('laydate', function(){
        // console.log($("#test1").eq(0).val());
        var laydate = layui.laydate;
        laydate.render({
            elem: '#test1'
        });
    });
    //json的引入和表格内的操作
    layui.use("table",function () {
        let table=layui.table;
        let $=layui.jquery;
        table.render({
            elem:"#demo",//绑定id
            url:"json/stable.json",//数据接口
            cols:[[
                {field: 'd', type:'checkbox',align: "center" },
                {field: 'd',title: '序号',type:'numbers',align: "center" },
                {field: 'id', title: '学号', width: 90,sort: true,align: "center"},
                {field: 'username', title: '学生姓名', width: 120,sort: true,align: "center"},
                {field: 'sex', title: '性别', width: 80,align: "center"},
                {field: 'age', title: '年龄', width: 90,sort: true,align: "center"},
                {field: 'classes', title: '班级', width: 100,sort: true,align: "center"},
                {field: 'teacher', title: '班主任', width: 100,align: "center"},
                {field: 'ttel', title: '班主任电话', width: 140,edit:'test',align: "center"},
                {field: 'patriarch', title: '家长', width: 100,align: "center"},
                {field: 'tel', title: '家长电话', width: 140,edit:'test',align: "center"},
                {field: 'Admission', title: '入园时间', width: 130,sort: true,align: "center"},
                {field: 'leave', title: '离园时间', width: 130,sort: true,align: "center"},
                {field: 'date', title: '日期', width: 120,align: "center"},
                {title: '操作', minWidth: 100, toolbar: '#barDemo', align: "center"}
            ]],
            page:true,
            //
            toolbar:"#toolbarDemo"
        });
        table.on('toolbar(test)',function (obj) {
            // console.log(obj);
            let checkStatus=table.checkStatus(obj.config.id);
            // console.log(checkStatus);
            let eventName=obj.event;
            switch (eventName) {
                case "getCheckData":
                    //获取被选中的记录的数组
                    var arr=checkStatus.data;
                    console.log(arr);
                    //将数组解析成字符串
                    // layer.alert(JSON.stringify(arr));
                    layer.alert(JSON.stringify(arr));
                    break;
                case "getCheckLength":
                    //获取被选中的记录的数组
                    var arr=checkStatus.data;
                    //将数组解析成字符串
                    layer.msg("选中了"+arr.length+"个学生！");
                    break;
                case "isAll":
                    //通过isall属性判断是否全选
                    var flag=checkStatus.isAll;
                    var str=flag?'全选':'未全选'
                    layer.msg(str);
                    break;
                default:
                    break;
            }
        })
        //监听行工具栏事件
        table.on('tool(test)',function (obj){
            var tr=obj.data;
            //得到事件
            var eventName=obj.event;
            if (eventName=='del'){
                layer.confirm("您确认删除吗",function(index){
                    obj.del();
                    layer.close(index);
                })
            }else if (eventName=='edit'){
                layer.prompt({
                    formType:0,
                    value:tr.tel,
                },function (value,index){
                    obj.update({
                        tel:value,
                    })
                    //关闭弹出层
                    layer.close(index)
                });
            }
        });
        table.on('edit()test',function (obj) {
            console.log(obj);
            var value=obj.value;
            var data=obj.data;
            var field=obj.field;
            layer.msg("【ID："+data.id+"】的"+field+"字段修改为："+value);
        })
        $(document).on('click','#searchBtn',function (data) {
            //获取搜索文本框内的值
            var sreach=$("#demoReload");
            table.reload('demo',{
                where:{
                    id:sreach.val(),
                    name:"zhangsan"
                },
                page:{
                    curr:1
                }
            })
        })
    })
</script>
</body>
</html>